<template>
    <div class="container">
        <el-popover placement="bottom" :width="300" trigger="click">
            <template #reference>
                <el-badge :value="value" :type="type" :max="max">
                    <component :is="`el-icon-${toLine(icon)}`"></component>
                </el-badge>
            </template>
            <!-- #default是el-plus组件库提供默认的插槽 -->
            <template #default>
                <!-- 自己写的插槽 -->
                <mlist :list="list" :actions="actions" @click-item="clickItem" @click-action="clickAction"></mlist>
            </template>
        </el-popover>
    </div>
</template>

<script lang="ts" setup>
import { toLine } from '@/utils';
import { computed } from 'vue'
import { list, actions } from '../lib'
// 定义类型
export interface ItemType {
  menuTitle: string,
  index: number,
  content: ListItem
}
export interface ActionType {
  index: number,
  content: ActionOptions,
  mentTitle: string
}
import type { PropType } from "vue";
import type { ListItem, ListOptions, ActionOptions } from "@/components/list/src/types";
enum Type {
    'primary',
    'success',
    'warning',
    'danger',
    'info'
}

const props = defineProps({
    icon: {
        type: String,
        default: "Bell"
    },
    value: {
        type: String || Number,
        default: ''
    },
    max: {
        type: Number,
        default: 100
    },
    type: {
        type: String,
        default: 'danger'
    },
    // 展示的消息列表
    list: {
        type: Array as PropType<ListOptions[]>,
        default: () => list
    },
    // 展示的操作按钮
    actions: {
        type: Array as PropType<ActionOptions[]>,
        default: () => actions
    },
})
const emits = defineEmits(['click-item', 'click-action'])

// 点击每一项
const clickItem = (item: ItemType) => {
  emits('click-item', item)
}
// 点击操作按钮
const clickAction = (item: ActionType) => {
  emits('click-action', item)
}

// 获取显示的icon图标
const iconMark = computed(() => {
  return /-|el/.test(props.icon) ? props.icon : `el-icon-${toLine(props.icon)}`
})
</script>
<style lang="scss" scoped>
.container {
    svg {
        height: 2em;
        width: 2em;
    }
}
.container {
  :deep(.el-popper) {
    padding: 0;
  }

  :deep(.el-badge) {
    cursor: pointer;
  }

}
</style>
